<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="海报素材"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="imgList"
            @pullup="loadMore"
        >

            <div
                class="img-empty-tips"
                v-if="imgList.length == 0"
            >{{emptyTips}}</div>

            <div class="img-list">
                <div class="img-list-left">
                    <div
                        class="img-item"
                        v-for="(item,index) of imgList"
                        v-if="index%2==0"
                        :key="index"
                        @click="showImg(item.img)"
                    >
                        <img
                            class="img"
                            v-lazy="item.img"
                        />
                    </div>
                </div>
                <div class="img-list-right">
                    <div
                        class="img-item"
                        v-for="(item,index) of imgList"
                        v-if="index%2==1"
                        :key="index"
                        @click="showImg(item.img)"
                    >
                        <img
                            class="img"
                            v-lazy="item.img"
                        />
                    </div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import wx from 'weixin-js-sdk'
export default {
    name: 'ImgSource',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            imgList: [],
            emptyTips: '正在全力加载中...',
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            previewImg: []
        }
    },
    mounted() {
        this.getImgList()
    },
    methods: {
        getImgList() {
            const that = this
            this.isLoading = true
            let postData = this.qs.stringify({
                cat_id: this.$route.query.imgType,
                page_size: 10,
                page: this.nowPage
            })
            this.axios.post('/api/fodder/list.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.list.length == 0) {
                        this.emptyTips = '暂无数据'
                        return
                    }
                    this.imgList = this.imgList.concat(data.data.list)
                    this.totalPage = Math.ceil(data.data.page_info.total / 10)
                    this.nowPage++
                    this.isLoading = false
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getImgList()
            }
        },
        showImg(url) {
            const that = this
            this.previewImg = []
            this.imgList.forEach(item => {
                that.previewImg.push(item.img)
            })
            this.commonDialog.alert('提示', '长按图片可保存到手机', function() {
                wx.previewImage({
                    current: url, // 当前显示图片的http链接
                    urls: that.previewImg // 需要预览的图片http链接列表
                })
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.img-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.img-list
    display flex
    justify-content space-between
    padding 0.21rem 0.24rem
    .img-list-left, .img-list-right
        width 4.67rem
        .img-item
            width 100%
            border-radius 5px
            overflow hidden
            background #fff
            margin-bottom 0.16rem
            .img
                width 100%
</style>

